<template>
  <div class="inb txt-left width-1800">
    <div class="common-date">
      <Form label-position="left" ref="formCustom" :model="overviewForm" :label-width="80"
            class="condition-form col-fff" inline>
        <FormItem label="空间选择：" prop="spaceValue">
          <Tooltip :content="workSpaceTip" placement="top">
            <Cascader :data="ensTreeData" v-model="overviewForm.spaceValue" change-on-select
                      :clearable="false" @on-change="changeWorkSpace"
                      style="width: 350px;"></Cascader>
          </Tooltip>
        </FormItem>
      </Form>
    </div>
    <div class="console-section">
      <div class="left-wrapper">
        <div class="container-top" style="margin-bottom: 10px">
          <div class="container-top-l">
            <template v-for="(sumary, index) of SummaryList">
              <div v-if="index === 0" style="margin-bottom: 10px" class="card-left"
                   :class="{tapColor:selectType}" @click="changeMenu(index)">
                <div class="collect-menu-line" v-show="selectType"></div>
                <div>
                  <div class="same-position"><span><img class="images" src="../../../assets/image/icon_all_water.png"
                                                        alt=""></span><span class="font-m">总用水</span></div>
                  <span class="font-xl mar-left-m mar-right-s">{{ sumary.useNum | num2numStr }}</span>
                  <span class="font-m2">t</span>
                </div>
                <div class="height40">
                  <span class="font-m">环比</span>
                  <Icon :type="sumary.lastPeriod.indexOf('+') === -1 ? 'md-arrow-down' : 'md-arrow-up'"
                        size="24" :color="sumary.lastPeriod.indexOf('+') === -1 ? '#E66770' : '#57CFBF'"
                        class="inb-sub"/>
                  <span class="font-m">{{ sumary.lastPeriod.substring(1, sumary.lastPeriod.length) }}</span>
                  <div class="inb-txt-bottom"
                       style="height: 20px;width: 1px;background-color: #ffffff;margin: 0 19px;"></div>
                  <span class="font-m">KPI</span>
                  <Icon :type="sumary.kpi.indexOf('+') === -1 ? 'md-arrow-down' : 'md-arrow-up'" size="24"
                        :color="sumary.kpi.indexOf('+') === -1 ? '#E66770' : '#57CFBF'"
                        class="inb-sub"/>
                  <span class="font-m">{{ sumary.kpi.substring(1, sumary.kpi.length) }}</span>
                </div>
              </div>
              <div v-if="index === 1" class="card-left"
                   :class="{tapColor:!selectType}" @click="changeMenu(index)">
                <div class="collect-menu-line" v-show="!selectType"></div>
                <div>
                  <div class="same-position"><span><img class="images" src="../../../assets/image/icon_all_water.png"
                                                        alt=""></span><span class="font-m">单车用水</span></div>
                  <span class="font-xl mar-left-m mar-right-s">{{ sumary.useNum | num2numStr }}</span>
                  <span class="font-m2">t/辆</span>
                </div>
                <div class="height40">
                  <span class="font-m">环比</span>
                  <Icon :type="sumary.lastPeriod.indexOf('+') === -1 ? 'md-arrow-down' : 'md-arrow-up'"
                        size="24" :color="sumary.lastPeriod.indexOf('+') === -1 ? '#E66770' : '#57CFBF'"
                        class="inb-sub"/>
                  <span class="font-m">{{ sumary.lastPeriod.substring(1, sumary.lastPeriod.length) }}</span>
                  <div class="inb-txt-bottom"
                       style="height: 20px;width: 1px;background-color: #ffffff;margin: 0 19px;"></div>
                  <span class="font-m">KPI</span>
                  <Icon :type="sumary.kpi.indexOf('+') === -1 ? 'md-arrow-down' : 'md-arrow-up'" size="24"
                        :color="sumary.kpi.indexOf('+') === -1 ? '#E66770' : '#57CFBF'"
                        class="inb-sub"/>
                  <span class="font-m">{{ sumary.kpi.substring(1, sumary.kpi.length) }}</span>
                </div>
              </div>
            </template>
          </div>
          <div class="container-top-r">
            <div class="graph-char inb-midden m-bg" style="background-color: #162C63;width: 100%;color:#fff">
              <div class="chart-title">
                <div class="inb-txt-bottom chart-title-line"></div>
                <span class="m-cell-color font-ll">用水走势</span>
                <div class="pull-right char-title-cat height30">
                  <span>
                    <div class="inb"
                         style="height: 10px;width: 10px;border-radius: 10px;margin:0 12px 0 16px;background-color: #43CCBA">
                    </div>
                  </span>
                  <span>实际</span>
                  <span style="margin-left: 7px;">
                    <div class="inb"
                         style="height: 10px;width: 10px;border-radius: 10px;margin:0 12px 0 16px;background-color: #7489F6">
                    </div>
                  </span>
                  <span>计划</span>
                </div>
              </div>
              <div>
                <div id="compareLineChart" ref="compareLineChart"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="container-down">
          <div class="rang-cell m-bg down-style" style="margin-right: 10px">
            <div class="chart-title">
              <div class="inb-txt-bottom chart-title-line"></div>
              <span class="m-cell-color font-ll">类型占比/排名</span>
            </div>
            <div class="inb" id="pieChart" ref="pieChart"></div>
            <div class="inb-top mar-left-ss mar-top-xl pad-top-ss row-list pre-scroll">
              <div v-for="(pie, index) of typePercent" class="mar-top-ss font-s" :key="index">
                <Row>
                  <i-col :span="2">
                    <div class="inb"
                         style="height: 10px;width: 10px;border-radius: 10px;margin-right: 20px;"
                         :style="'background-color:' + pieColors[index] + ';'"></div>
                  </i-col>
                  <i-col :span="8">
                    <span>{{ pie.name }}</span>
                  </i-col>
                  <i-col :span="10">
                    <span>{{ pie.value | num2numStr }}</span>
                  </i-col>
                  <i-col :span="4">
                    <span v-if="typePercentTotal !== '0.00'">{{ pie.value ? (pie.value / typePercentTotal * 100).toFixed(2) : pie.value }}%</span>
                    <span v-else>{{typePercentTotal}}%</span>
                  </i-col>
                </Row>
              </div>
            </div>
          </div>
          <div class="rang-cell m-bg down-style">
            <div class="chart-title">
              <div class="inb-txt-bottom chart-title-line"></div>
              <span class="m-cell-color font-ll">子级占比/排名</span>
            </div>
            <div class="inb" id="childPieChart" ref="childPieChart"></div>
            <div class="inb-top mar-left-ss mar-top-xl pad-top-ss row-list pre-scroll">
              <div v-for="(pie, index) of childTypePercent" class="mar-top-ss font-s" :key="index">
                <Row>
                  <i-col :span="2">
                    <div class="inb"
                         style="height: 10px;width: 10px;border-radius: 10px;margin-right: 20px;"
                         :style="'background-color:' + childPieColors[index] + ';'"></div>
                  </i-col>
                  <i-col :span="8">
                    <span>{{ pie.name }}</span>
                  </i-col>
                  <i-col :span="10">
                    <span>{{ pie.value | num2numStr }}</span>
                  </i-col>
                  <i-col :span="4">
                    <span v-if="childTypePercentTotal !== '0.00'">{{ pie.value ? (pie.value / childTypePercentTotal * 100).toFixed(2) : pie.value }}%</span>
                    <span v-else>{{childTypePercentTotal}}%</span>
                  </i-col>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wrapper">
        <div class="rang-cell inb-midden m-bg" style="background-color: #132354;margin-bottom: 10px">
          <div class="chart-title">
            <div class="inb-txt-bottom chart-title-line"></div>
            <span class="m-cell-color font-ll">同类对比</span>
          </div>
          <div class="m-dark-table m-chart-table" style="height: 280px;">
            <i-table
              v-show="sameCompareTableConfig.sameCompareData && sameCompareTableConfig.sameCompareData.length > 0"
              style="background-color: #132354;" stripe size="small" height="280"
              :columns="sameCompareTableConfig.sameCompareColumns"
              :data="sameCompareTableConfig.sameCompareData"></i-table>
          </div>
          <div class="m-page-btn mar-top-s txt-center">
            <Button size="small" type="primary" @click="sameComparePageChange('back')">
              <Icon type="ios-arrow-back"/>
            </Button>
            <Button size="small" type="primary" style="margin-left: 22px;"
                    @click="sameComparePageChange('forward')">
              <Icon type="ios-arrow-forward"/>
            </Button>
          </div>
        </div>
        <div class="rang-cell inb-midden m-bg" style="background-color: #132354;">
          <div class="chart-title">
            <div class="inb-txt-bottom chart-title-line"></div>
            <span class="m-cell-color font-ll">过往排名</span>
          </div>
          <div class="m-dark-table m-chart-table" style="opacity: 1;height: 280px;">
            <i-table
              v-show="lastRankingTableConfig.lastRankingData && lastRankingTableConfig.lastRankingData.length > 0"
              stripe size="small" width="100%" height="280"
              :columns="lastRankingTableConfig.lastRankingColumns"
              :data="lastRankingTableConfig.lastRankingData"></i-table>
          </div>
          <div class="m-page-btn mar-top-s txt-center">
            <Button size="small" type="primary" @click="lastRankingPageChange('back')">
              <Icon type="ios-arrow-back"/>
            </Button>
            <Button size="small" type="primary" style="margin-left: 22px;"
                    @click="lastRankingPageChange('forward')">
              <Icon type="ios-arrow-forward"/>
            </Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import transformFilters from '../../../util/transformFilters'
  import {mapState} from 'vuex'

  export default {
    name: 'aggregateWaters',
    directives: {},
    components: {},
    mixins: [transformFilters],
    data () {
      let rankRender = (h, params) => {
        let index = Number(params.index)
        let color = '#ffffff'
        switch (index) {
          case 0:
            color = '#43CCBA'
            break
          case 1:
            color = '#FF8915'
            break
          case 2:
            color = '#E66770'
            break
          case 3:
            color = '#9F9C9B'
            break
          case 4:
            color = '#9F9C9B'
            break
          case 5:
            color = '#9F9C9B'
            break
        }
        return h('div', [
          h('Icon', {
            props: {
              type: 'flag',
              size: '18'
            },
            class: 'm-iconfont',
            style: {
              'vertical-align': 'text-bottom',
              'color': color
            }
          }, ''),
          h('span', {
            style: {
              'margin-left': '7px'
            }
          }, params.row.rank)
        ])
      }
      let useNumRender = (h, params) => {
        return h('div', this._num2numStr(params.row.useNum))
      }
      let yearsIncrease = (h, params) => {
        let increase = params.row.increase
        increase = Number(increase.substring(0, increase.length - 1))
        let color = ''
        let className = ''
        if (increase === 0) {
          color = '#FF8915'
          className = 'md-remove'
        } else if (increase > 0) {
          color = '#43CCBA'
          className = 'md-arrow-up'
        } else {
          color = '#E66770'
          className = 'md-arrow-down'
        }
        return h('div', [
          h('span', {
            style: {
              'width': '70px',
              'display': 'inline-block'
            }
          }, params.row.increase),
          h('Icon', {
            props: {
              type: className,
              size: '18'
            },
            class: className,
            style: {
              'vertical-align': 'text-bottom',
              'color': color
            }
          }, '')
        ])
      }
      let mLineChartOption = function ({xAxisData, seriesData, lineColor, areaColor}) {
        let option = {
          title: {
            text: ''
          },
          tooltip: {
            show: false,
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: 'rgba(0,0,0,0)'
              }
            }
          },
          toolbox: {
            feature: {}
          },
          grid: {
            left: '24px',
            right: '24px',
            bottom: '0%',
            top: '0%',
            containLabel: false
          },
          xAxis: [
            {
              type: 'category',
              show: false,
              boundaryGap: false,
              data: xAxisData || ['', '', '', '', '', '', '', '', '', '', '', '']
            }
          ],
          yAxis: [
            {
              type: 'value',
              show: false
            }
          ],
          series: [
            {
              color: lineColor || '#687FF5',
              name: '产值',
              type: 'line',
              stack: '总量',
              smooth: true,
              itemStyle: {
                opacity: 0
              },
              lineStyle: {
                color: lineColor || '#687FF5'
              },
              areaStyle: {
                color: areaColor || '#283B86'
              },
              data: seriesData || [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90]
            }
          ]
        }
        return option
      }
      return {
        mLineChartOption: mLineChartOption,
        SummaryList: [
          {
            kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
          },
          {
            kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
          },
          {
            kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
          },
          {
            kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
          }
        ],
        sameCompareTableConfig: {
          sameCompare: {
            time: this.activeDate,
            page: 1,
            size: 6,
            totalPages: 0,
            sortByColumn: '',
            selectType: true,
            workSpace: ''
          },
          // 同类对比表格表头配置
          sameCompareColumns: [
            {
              title: '排名',
              type: 'rank',
              align: 'center',
              render: rankRender
            },
            {
              title: '厂区',
              key: 'name',
              className: 'table-info-column',
              align: 'center'
            },
            {
              title: '总量',
              key: 'useNum',
              align: 'center',
              render: useNumRender
            },
            {
              title: '涨幅',
              key: 'increase',
              align: 'center',
              // render: (h, params) => {
              //     return h('div', params.row.increase)
              // }
              render: yearsIncrease
            }
          ],
          sameCompareData: [],
          sameCompareRow: 5
        },
        lastRankingTableConfig: {
          lastRanking: {
            time: this.activeDate,
            page: 1,
            size: 6,
            totalPages: 0,
            sortByColumn: '',
            selectType: true,
            workSpace: ''
          },
          lastRankingColumns: [
            {
              title: '排名',
              key: 'rank',
              align: 'center',
              render: rankRender
            },
            {
              title: '时间',
              key: 'year',
              className: 'table-info-column',
              align: 'center'
            },
            {
              title: '总量',
              key: 'useNum',
              align: 'center',
              render: useNumRender
            },
            {
              title: '涨幅',
              key: 'increase',
              align: 'center',
              // render: (h, params) => {
              //     return h('div', params.row.increase)
              // }
              render: yearsIncrease
            }
          ],
          lastRankingData: []
        }
      }
    },
    props: {},
    computed: {
      ...mapState('comDate', {
        activeDate: state => state.activeDate
      })
    },
    watch: {},
    methods: {
      init () {
        let self = this
        self.ensTree({type: '水', factory: 'ZZ'}, function () {
          self.$nextTick(() => {
            self.refreshData()
          })
        })
      },
      refreshData () {
        let self = this
        self.post_carbon_carbonTrend(self.activeDate, self.selectType ? 'total' : 'single', self.workSpaceString, self.workSpaceName)
        self.post_carbon_carbonTrendSon(self.activeDate, self.selectType ? 'total' : 'single', self.workSpaceString, self.workSpaceName)
        self.post_carbon_sameCompare(self.activeDate, self.selectType ? 'total' : 'single', self.workSpaceString, self.workSpaceName)
        self.post_carbon_lastRanking(self.activeDate, self.selectType ? 'total' : 'single', self.workSpaceString, self.workSpaceName)
        self.post_carbon_typePercent(self.activeDate, self.selectType ? 'total' : 'single', self.workSpaceString, self.workSpaceName)
        // self.post_carbon_lastCompare(self.activeDate, self.menuActive === 'all' ? '0' : '1', self.workSpaceString)
        self.post_carbon_allCarBon(self.activeDate, self.workSpaceString)
      },
      changeMenu (index) {
        if (this.selectType != index) return false
        this.selectType = !this.selectType
        this.refreshData()
      },
      // xxx汇总碳排-- 碳排走势
      post_carbon_carbonTrend: function (time, selectType, workSpace, workSpaceName) {
        let self = this
        new window.Api(
          {
            ...{id: new window.Api().waterTrend},
            ...{
              time: time,
              selectType: selectType,
              workSpace: workSpace,
              workSpaceName: workSpaceName
            }
          }, 'POST').getData().then(function (res) {
          if (res.data.status === 200) {
            let x = {
              xAxisData: res.data.jsData.xData,
              yieldData: res.data.jsData.yLeft,
              carbonData: res.data.jsData.yRight,
              yName: res.data.jsData.yName || []
            }
            self.chartLineData = x
            self.initCompareLine('用水')
          } else {

          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      // xxx汇总碳排-- 子级占比排名
      post_carbon_carbonTrendSon: function (time, selectType, workSpace, workSpaceName) {
        let self = this
        new window.Api(
          {
            ...{id: new window.Api().waterChildRank},
            ...{
              time: time,
              selectType: selectType,
              workSpace: workSpace,
              workSpaceName: workSpaceName
            }
          }, 'POST').getData().then(function (res) {
          if (res.data.status === 200) {
            self.childTypePercent = res.data.jsData.datas
            self.childInitPieChart()
          } else {

          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      // xxx汇总碳排-- 同类对比
      post_carbon_sameCompare: function (time, selectType, workSpace, workSpaceName, init) {
        let self = this
        self.sameCompareTableConfig.sameCompare.time = time
        self.sameCompareTableConfig.sameCompare.selectType = selectType
        self.sameCompareTableConfig.sameCompare.workSpace = workSpace
        if (init) {
          self.$set(self.sameCompareTableConfig.sameCompare, 'page', init)
        } else {
          self.$set(self.sameCompareTableConfig.sameCompare, 'page', 0)
        }
        new window.Api(
          {
            ...{id: new window.Api().waterSimilarContrast},
            ...this.sameCompareTableConfig.sameCompare,
            ...{workSpaceName: workSpaceName}
          }, 'POST').getData().then(function (res) {
          if (res.data.status === 200) {
            self.sameCompareTableConfig.sameCompareData = res.data.jsData.content
            self.sameCompareTableConfig.sameCompare.totalPages = res.data.jsData.totalPages
          } else {

          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      // 同类对比的 分页方法
      sameComparePageChange (type) {
        let self = this
        if (type === 'back') {
          if (self.sameCompareTableConfig.sameCompare.page === 0) {
            self.$Message.warning('已经是第一页了')
            return
          }
          self.$set(self.sameCompareTableConfig.sameCompare, 'page', self.sameCompareTableConfig.sameCompare.page - 1)
        } else {
          if (self.sameCompareTableConfig.sameCompare.page >= self.sameCompareTableConfig.sameCompare.totalPages - 1) {
            self.$Message.warning('已经是最后一页了')
            return
          }
          self.$set(self.sameCompareTableConfig.sameCompare, 'page', self.sameCompareTableConfig.sameCompare.page + 1)
        }
        self.post_carbon_sameCompare(self.activeDate, self.selectType ? 'total' : 'single', self.workSpaceString, self.workSpaceName, self.sameCompareTableConfig.sameCompare.page)
      },
      // 过往排名的 拿数据方法
      post_carbon_lastRanking: function (time, selectType, workSpace, workSpaceName, init) {
        let self = this
        self.lastRankingTableConfig.lastRanking.time = time
        self.lastRankingTableConfig.lastRanking.selectType = selectType
        self.lastRankingTableConfig.lastRanking.workSpace = workSpace
        if (init) {
          self.$set(self.lastRankingTableConfig.lastRanking, 'page', init)
        } else {
          self.$set(self.lastRankingTableConfig.lastRanking, 'page', 0)
        }
        new window.Api(
          {
            ...{id: new window.Api().waterPastRanking},
            ...this.lastRankingTableConfig.lastRanking,
            ...{workSpaceName: workSpaceName}
          }, 'POST').getData().then(function (res) {
          if (res.data.status === 200) {
            self.lastRankingTableConfig.lastRankingData = res.data.jsData.content
            // self.lastRankingTableConfig.lastRanking.totalPages = res.data.jsData.totalPages
          } else {

          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      // 过往排名的 分页方法
      lastRankingPageChange (type) {
        let self = this
        if (type === 'back') {
          if (self.lastRankingTableConfig.lastRanking.page === 0) {
            self.$Message.warning('已经是第一页了')
            return
          }
          self.$set(self.lastRankingTableConfig.lastRanking, 'page', self.lastRankingTableConfig.lastRanking.page - 1)
        } else {
          if (self.lastRankingTableConfig.lastRanking.page >= self.lastRankingTableConfig.lastRanking.totalPages - 1) {
            self.$Message.warning('已经是最后一页了')
            return
          }
          self.$set(self.lastRankingTableConfig.lastRanking, 'page', self.lastRankingTableConfig.lastRanking.page + 1)
        }
        // self.post_carbon_lastRanking(self.activeDate, self.menuActive === 'all' ? '0' : '1', self.workSpaceString, self.lastRankingTableConfig.lastRanking.page)
      },
      // xxx汇总碳排--总碳排,单车碳排,总产量,平均温度
      post_carbon_allCarBon: function (time, workSpace) {
        let self = this
        new window.Api(
          {
            ...{id: new window.Api().waterBicy},
            ...{
              time: time,
              workSpace: workSpace
            }
          }, 'POST').getData().then(res => {
          if (res.data.status === 200 && res.data.jsData) {
            self.SummaryList = res.data.jsData
          } else {
            self.SummaryList = [
              {
                kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
              },
              {
                kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
              },
              {
                kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
              },
              {
                kpi: '', lastPeriod: '', type: '', unit: '', useNum: ''
              }
            ]
          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      // xxx汇总碳排-- 类型占比/排名
      post_carbon_typePercent: function (time, selectType, workSpace, workSpaceName) {
        let self = this
        new window.Api(
          {
            ...{id: new window.Api().waterTypeRank},
            ...{
              time: time,
              selectType: selectType,
              workSpace: workSpace,
              workSpaceName: workSpaceName
              // summaryType: 'carbon'
            }
          }, 'POST').getData().then(function
          (res) {
          if (res.data.status === 200) {
            self.typePercent = res.data.jsData.datas
            self.initPieChart('用水')
          } else {

          }
        }).catch(function (e) {
          // console.log(e)
        })
      }
    },
    beforeCreate () {
    },
    created () {
      this.init()
    },
    destroyed () {
    },
    mounted () {
      this._timerFun(10000)
    }
  }
</script>
<style scoped>

</style>
